// var btnShuffle=document.querySelector('button:nth-child(1)');
// var btnJoin=document.querySelector('button:nth-child(2)');
// var imgs=document.querySelectorAll('img')
// let shield=document.querySelectorAll('shield')


// let shield=document.querySelector('shield')


// btnShuffle.onclick=function(){
//     for(var i=0;i<imgs.length;i++){
//         //随机设置9张图片的rotate和translate
//         var randomDeg=parseInt(Math.random()*360);
//         //-600 600
//         var randomX=parseInt(Math.random()*1200)-600;
//         var randomY=parseInt(Math.random()*800)-400;
//         imgs[i].style.transform="translate("+randomX+"px ,"+randomY+"px) rotate("+randomDeg+"deg)"
//     }
// }
//
// function shuffle(imgs){
//     for(let i=0;i<imgs.length;i++){
//         //随机设置9张图片的rotate和translate
//         var randomDeg=parseInt(Math.random()*360);
//         //-600 600
//         var randomX=parseInt(Math.random()*1200)-600;
//         var randomY=parseInt(Math.random()*800)-400;
//         imgs[i].style.transform="translate("+randomX+"px ,"+randomY+"px) rotate("+randomDeg+"deg)"
//     }
// }
// btnJoin.onclick=function(){
//     for(var i=0;i<imgs.length;i++){
//         imgs[i].style.transform="translate(0px,0px) rotate(0deg)"
//     }
// }

class Shield {
    // constructor(imgs) {
    //     // super(props);
    // }
    constructor(shield) {
        // super(props);
        this.shield=shield;
        // console.log("shield")
        // console.log(shield)
        // this.imgs=shield.querySelectorAll("img");
        this.imgs=shield.getElementsByTagName("img");
        // console.log(" this.imgs")
        // console.log( this.imgs)
        // console.log()
        // this.btnShuffle=shield.querySelector("shuffle");
        // this.btnJoin=shield.querySelector("join");
        // let imgs= this.imgs

        // for(let i=0;i<imgs.length;i++){
        //     //随机设置9张图片的rotate和translate
        //     var randomDeg=parseInt(Math.random()*360);
        //     //-600 600
        //     var randomX=parseInt(Math.random()*1200)-600;
        //     var randomY=parseInt(Math.random()*800)-400;
        //     imgs[i].style.transform="translate("+randomX+"px ,"+randomY+"px) rotate("+randomDeg+"deg)"
        // }
    }

    // js 函数 重载
    //  shuffle(imgs){
    //     for(let i=0;i<imgs.length;i++){
    //         //随机设置9张图片的rotate和translate
    //         var randomDeg=parseInt(Math.random()*360);
    //         //-600 600
    //         var randomX=parseInt(Math.random()*1200)-600;
    //         var randomY=parseInt(Math.random()*800)-400;
    //         imgs[i].style.transform="translate("+randomX+"px ,"+randomY+"px) rotate("+randomDeg+"deg)"
    //     }
    // }

    // js 函数 重载
    shuffle(){
       let imgs=this.imgs
        // console.log("imgs")
        // console.log(imgs)
        // console.log("this.imgs")
        // console.log(this.imgs)
        // console.log("this")
        // console.log(this)
        // this 变成了 btn
        for(let i=0;i<imgs.length;i++){
            //随机设置9张图片的rotate和translate
            var randomDeg=parseInt(Math.random()*360);
            //-600 600
            var randomX=parseInt(Math.random()*1200)-600;
            var randomY=parseInt(Math.random()*800)-400;
            imgs[i].style.transform="translate("+randomX+"px ,"+randomY+"px) rotate("+randomDeg+"deg)"
        }
    }


  // join(imgs){
  //       for(let i=0;i<imgs.length;i++){
  //           imgs[i].style.transform="translate(0px,0px) rotate(0deg)"
  //       }
  //   }


    join(){
        let imgs=this.imgs
        for(let i=0;i<imgs.length;i++){
            imgs[i].style.transform="translate(0px,0px) rotate(0deg)"
        }
    }

}